<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/4/13
  Time: 18:48
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台书管理</title>
    <link rel="stylesheet" href="/static/css/admin_style.css">
    <link type="text/css" rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .right h2 {
            margin: 10px 0;
        }

        .right li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <header>
        <div style="float: left;"><img src="/static/image/loginbg.jpg" width="152px" height="55px"></div>
        <div style="float: right;"><i class="layui-icon  layui-anim layui-anim-rotate layui-anim-loop"
                                      style="font-size: 30px; color: rgb(150, 155, 170);"></i>&nbsp; &nbsp; &nbsp;
        </div>
    </header>
    <div id="" class="main">

        <jsp:include page="/page/admin_base_left.jsp"></jsp:include>

        <div class="right">
            <div class="layui-row">

                <div class="layui-col-md11">
                    <div class="layui-row grid-demo">
                        <div class="layui-col-md10">

                            <button type="button" id="addBookType" class="layui-btn layui-btn-radius">添加分类</button>

                            <div class="layui-panel">
                                <span style="padding:15px 15px 5px ">书籍类别管理</span>
                                <table class="layui-table">
                                    <colgroup>
                                        <col width="200">
                                        <col width="200">
                                        <col width="200">
                                        <col width="200">
                                        <col width="200">
                                        <col width="200">
                                        <col width="200">
                                        <col width="200">
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="bookTypePage">
                                    <c:forEach items="${bookTypes}" var="booktype">
                                        <tr id="bookType_${booktype.btId}">
                                            <td>${booktype.btId}</td>
                                            <td>${booktype.btName}</td>
                                            <td><button type="button" onclick="deleteBookType(${booktype.btId})" class="layui-btn layui-btn-radius">删除分类</button></td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <div id="bookTypePagePage"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>


<div id="PopAddBookType" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div style="background-color: #fff;">
            <div style="padding: 15px;" class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加类型</h4>
            </div>
            <div class="modal-body">
                <div class="row clearfix">

                    <div class="form-group" style="padding: 15px">
                        <label class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-10">
                            <input id="modelType" type="text" class="form-control"/>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button id="modelAddBookType" type="button" class="btn btn-default btn-success">添加</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>



</body>
</html>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">

<script src="/static/js/jquery-3.6.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/layui-page.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/bootstrap-pop.js"></script>
<script>
    <c:if test="${msg != null}" >
        layer.msg("${msg}");
    </c:if>
    var bookTypePage = new LayuiPage("#bookTypePage","#bookTypePagePage",6,0);

    $("#addBookType").click(function () {
        popShow("PopAddBookType");
    });

    $("#modelAddBookType").click(function () {
        var type = $("#modelType").val();

        var url = "/admin/doAddBookType?bookTypeName="+type;

        window.location.href = url;

    });
    function deleteBookType(id) {
        $.ajax({
            url:"/admin/doDeleteBookType?bookTypeId="+id,
            type: "get",
            dataType: "json",
            contentType: false,
            success:function (json) {
                console.log(json);
                //var obj = JSON.parse(data);
                if (json.ret == 'true'){
                    layer.msg(json.data);
                    bookTypePage.deleteItem("bookType_"+id);
                    /*layerPage.deleteItem("bookId_"+id);*/
                }else {
                    layer.msg(json.data);
                }
            },
            error:function (data) {

            }
        });

    }


</script>
